<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
		/*练习：1圆形 2正三角形
		思路1:宽高与边框倒角一致
		思路2:div#trangle
			              css中:抓到div【斜线】
		                 左边框:50像素实线红色
		                 右边框:50像素实线黄色
		                 下边框:50像素实线黑色
		          注意:先别加宽高 transparent 透明色*/
				  div{
					  width:400px;
					  height:400px;
					  border:1px solid red;
					  border-radius:50%;
					  /*边框阴影 box-shadow 属性*/
					  box-shadow:5px 5px 10px 5px red outset;
					  }
					  /*思路2
					  transparent 透明色*/
					  
					 /* div#triangle{
						  width:0;
						  border-left:50px solid red transparent ;
						  border-right:50px solid yellow transparent; 
						  border-bottom:50px solid black;*/
						  /*两行：倒三角 蓝色 透明度 .3
						  提醒：所有边框：50px solid transparant
						        上边框颜色改成蓝色 0，0，255*/
								border:50px solid transparent;
								border-right-color:rgba(0,0,255,.3);
						}		
					  /*outline 边框轮廓 只针对input元素*/
					  input{
						  outline: 1px solid red;
					  }
					  /*
					  实际应用：通配选择器 去掉轮廓
					  *{ outline:0}
					  */
				  
				  </style>
	</head>
	<body>
		<div></div>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>